<template>
	<li
		class="mp-list-item"
		@click="
			$router.push({
				path: '/product',
				query: {
					title:
						'可选✿12人小团/头等舱大巴团三环内酒店接】华山一日游✿赠送KFC早餐✿登山礼包✿享贵宾休息室',
				},
			})
		"
	>
		<div class="mp-list-imgcon image-ready">
			<img
				class="mp-list-productimg"
				src="https://imgs.qunarzz.com/p/tts0/1911/91/87b5474ac614eb02.jpg_110x110_74136932.jpg"
				alt="【可选✿12人小团/头等舱大巴团 三环内酒店接】华山一日游✿赠送KFC早餐✿登山礼包✿享贵宾休息室"
			/><span class="mp-list-bookingflag mp-list-bookingflag-tomorrow"
				><span class="mp-list-bookingtext">可订明日</span></span
			>
		</div>

		<div class="mp-list-productinfo mpg-flexbox-item mpf-border-bottom">
			<h4 class="mp-list-productname mpg-ellipsis2">
				【可选✿12人小团/头等舱大巴团
				三环内酒店接】华山一日游✿赠送KFC早餐✿登山礼包✿享贵宾休息室
			</h4>
			<div class="mp-list-taglist">
				<span class="mp-list-tagitemlight mpf-border-right">西安出发</span
				><span class="mp-list-tagitem mpf-border-right">无自费</span
				><span class="mp-list-tagitem mpf-border-right">无购物</span>
			</div>
			<div class="mp-list-cashback"></div>
			<div class="mp-list-priceinfo">
				<span class="mp-list-qunarprice">¥<em>86</em></span
				><span class="mp-list-priceflag">起</span>
			</div>
			<div class="mp-list-moreinfo">
				<span class="mp-list-text mpf-border-left">已售341</span
				><!--0928marketprice<div class="mp-list-marketprice">票面价:<span class='mp-price-notused'>&yen;86</span></div>-->
			</div>
		</div>
	</li>
</template>

<script>
	export default {};
</script>

<style scoped>
	.mp-list {
	}

	.mp-list-item {
		width: 100%;
		display: flex;
		position: relative;
	}

	.mp-list-imgcon {
		margin: 10px;
		width: 80px;
		height: 80px;
		position: relative;
		flex-shrink: 0;
	}

	.mp-list-imgcon img {
		width: 100%;
	}

	.mp-list-bookingflag {
		position: absolute;
		top: -2px;
		left: -2px;
		font-size: 12px;
		line-height: 12px;
	}

	.mp-list-productinfo {
		padding: 10px 10px 10px 0;
		height: 80px;
		overflow: hidden;
		position: relative;
	}

	.mp-list-bookingflag {
		background: #00bcd4;
	}

	.mp-list-bookingtext {
		font-size: 12px;
		color: #fff;
	}
	.mp-list-productname {
		font-size: 15px;
		line-height: 18px;
		font-weight: 400;
	}

	.mp-list-taglist {
		position: relative;
		top: 0.06rem;
		overflow: hidden;
		max-height: 0.58rem;
		margin-right: 1rem;
		padding-top: 0.06rem;
		line-height: 12px;
		font-size: 0;
	}

	.mp-list-tagitemlight {
		display: inline;
		padding: 0 5px;
		font-size: 12px;
		color: #00bcd4;
	}

	.mp-list-tagitem {
		display: inline;
		padding: 0 5px;
		font-size: 12px;
		color: #616161;
	}

	.mp-list-priceinfo {
		position: absolute;
		right: 10px;
		bottom: 10px;
		height: 16px;
		line-height: 16px;
		color: #9e9e9e;
		text-align: right;
	}

	.mp-list-moreinfo {
		position: absolute;
		left: -5px;
		bottom: 10px;
		width: 100%;
		font-size: 0;
		color: #9e9e9e;
	}

	.mp-list-text {
		padding: 0 5px;
		font-size: 11px;
	}

	.mp-list-qunarprice {
		font-size: 16px;
		font-weight: bold;
		color: #ff8300;
	}

	.mp-list-priceflag {
		font-size: 12px;
		padding-left: 1px;
	}
</style>
